﻿function pageLoad(sender, args) {
    $('div.group').hover(over, out);
    function over(e) {
        //$(this): refers to the element which fire the event, in our case the DIV element you hover on.
        //offset(): Get the current offset (left/top) of the first matched element relative to the viewport
        var offset = $(this).offset();

        //next([expr]): returns the very next sibling for each element.
        //this case will return DIV element that wraps the Details GridView
        var $next = $(this).next();

        //Set position for the tooltip element using css() method and passing the properties as JSON format.
        $next.css({ left: offset.left + $(this).width(), top: offset.top });

        //show the tooltip with fadeIn() effect
        $next.fadeIn('normal');
    }
    function out(e) {
        var $next = $(this).next();
        $next.fadeOut('normal');
    }
}